<script lang="ts" setup>
import ProductBox from "../Common/ProductBox.vue";
import Tip from "../Common/Tip.vue";
import { ref } from "vue";
const drawer = ref(false);
import type { Dayjs } from "dayjs";
type RangeValue = [Dayjs, Dayjs];

const value5 = ref<string>("Option1");
const value1 = ref<RangeValue>();
const value6 = ref<string>("");
const year = ref<Dayjs>();

const dataSource = ref([
  {
    key: "1",
    name: "111111111",
    title: "2222222222",
    amount: "2222222222",
    time: "2222222222",
  },
]);

const columns = ref([
  {
    title: "订单编号",
    dataIndex: "name",
    key: "name",
  },
  {
    title: "订单标题",
    dataIndex: "title",
    key: "title",
  },
  {
    title: "订单金额",
    dataIndex: "amount",
    key: "amount",
  },
  {
    title: "创建时间",
    dataIndex: "time",
    key: "time",
  },
]);
</script>
<template>
  <div class="pl-5 pr-5">
    <ProductBox title="合同申请" back>
      <Tip :show-icon="false" class="mb-5">
        合同由服务条款及有效订单信息组成，服务条款无需申请，您可以自助下载。
        <a-button type="primary" @click="drawer = true">下载服务条款</a-button>
      </Tip>

      <div class="flex mb-5 flex-wrap">
        <a-button class="mr-5 mb-5" type="primary" disabled>生成合同</a-button>
        <div class="flex w-100 mb-5">
          <a-input-group compact>
            <a-select v-model:value="value5">
              <a-select-option value="Option1">订单编号</a-select-option>
            </a-select>
            <a-input v-model:value="value6" style="width: 70%" />
          </a-input-group>
        </div>
        <a-date-picker v-model:value="year" picker="year" class="mb-5" />
        <span class="w-5"></span>
        <a-range-picker v-model:value="value1" class="mb-5" />
        <a-button type="text">
          <img src="/console/downloadIcon.png" alt="" class="w-5 h-5" />
        </a-button>
      </div>

      <a-table :scroll="{ x: 1000, }" :dataSource="dataSource" :columns="columns" />
    </ProductBox>

    <el-drawer v-model="drawer" title="I am the title" :with-header="false">
      <p>合同申请</p>
      <p>合同申请</p>
      <p>合同申请</p>
      <p>合同申请</p>
      <p>合同申请</p>
      <p>合同申请</p>
      <p>合同申请</p>
      <p>合同申请</p>
      <p>合同申请</p>
      <p>合同申请</p>
      <p>合同申请</p>
      <p>合同申请</p>
      <a-button type="primary">下载</a-button>
    </el-drawer>
  </div>
</template>
<style lang="scss" scoped></style>
